<template>
  <div class="consult-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/pet-center'}">宠物中心</el-breadcrumb-item>
      <el-breadcrumb-item>咨询中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航栏 -->
    <el-header class="consult-header">
      <div class="logo">
        <i class="fas fa-paw"></i>
        PetHealth+ 在线咨询
      </div>
    </el-header>

    <!-- 咨询流程主体 -->
    <div class="consult-main">
      <!-- 步骤条 -->
      <el-steps :active="currentStep" finish-status="success" simple>
        <el-step title="选择类型"></el-step>
        <el-step title="填写信息"></el-step>
        <el-step title="确认提交"></el-step>
      </el-steps>

      <!-- 咨询表单 -->
      <el-card class="consult-form">
        <!-- 第一步：选择咨询类型 -->
        <div v-show="currentStep === 0">
          <h3>选择咨询类型</h3>
          <el-radio-group v-model="formData.consultType">
            <el-radio label="online" border>在线问诊</el-radio>
            <el-radio label="emergency" border>紧急求助</el-radio>
            <el-radio label="followup" border>复诊咨询</el-radio>
          </el-radio-group>
        </div>

        <!-- 第二步：填写详细信息 -->
        <div v-show="currentStep === 1">
          <h3>宠物健康信息</h3>
          <el-form :model="formData" :rules="rules" ref="consultForm">
            <el-form-item label="宠物类型" prop="petType">
              <el-select v-model="formData.petType" placeholder="请选择">
                <el-option
                    v-for="item in petTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="主要症状" prop="symptoms">
              <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请详细描述宠物的症状（如持续时间、具体表现等）"
                  v-model="formData.symptoms">
              </el-input>
            </el-form-item>

            <el-form-item label="上传资料">
              <el-upload
                  action="https://your-upload-api.com"
                  list-type="picture-card"
                  :on-success="handleUploadSuccess"
                  :file-list="fileList">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="formData.contact" placeholder="请输入手机号码">
                <template slot="prepend">+86</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第三步：确认信息 -->
        <div v-show="currentStep === 2">
          <h3>确认提交信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="咨询类型">{{ formatConsultType(formData.consultType) }}</el-descriptions-item>
            <el-descriptions-item label="宠物类型">{{ formData.petType }}</el-descriptions-item>
            <el-descriptions-item label="主要症状">{{ formData.symptoms }}</el-descriptions-item>
            <el-descriptions-item label="附件资料">
              <span v-for="file in fileList" :key="file.uid" class="file-item">
                {{ file.name }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ formData.contact }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
              v-if="currentStep > 0"
              @click="prevStep"
              :disabled="currentStep === 0">
            上一步
          </el-button>

          <el-button
              v-if="currentStep < 2"
              type="primary"
              @click="nextStep">
            {{ currentStep === 1 ? '提交咨询' : '下一步' }}
          </el-button>

          <el-button
              v-if="currentStep === 2"
              type="success"
              @click="submitConsult">
            确认提交
          </el-button>
        </div>
      </el-card>

      <!-- 提交成功对话框 -->
      <el-dialog
          title="提交成功"
          :visible.sync="successDialogVisible"
          width="30%">
        <div class="success-message">
          <i class="el-icon-success success-icon"></i>
          <p>咨询请求已成功提交！</p>
          <p>咨询编号：{{ consultNumber }}</p>
          <p>预计24小时内会有医生与您联系</p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConsultPage',
  data() {
    // 手机号验证规则
    const validatePhone = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入有效的手机号码'));
      } else {
        callback();
      }
    };

    return {
      currentStep: 0,
      formData: {
        consultType: 'online',
        petType: '',
        symptoms: '',
        contact: ''
      },
      fileList: [],
      petTypes: [
        { value: 'dog', label: '犬类' },
        { value: 'cat', label: '猫类' },
        { value: 'other', label: '其他宠物' }
      ],
      rules: {
        petType: [
          { required: true, message: '请选择宠物类型', trigger: 'change' }
        ],
        symptoms: [
          { required: true, message: '请输入症状描述', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
      },
      successDialogVisible: false,
      consultNumber: Math.random().toString(36).substr(2, 9).toUpperCase()
    }
  },
  methods: {
    formatConsultType(type) {
      const map = {
        online: '在线问诊',
        emergency: '紧急求助',
        followup: '复诊咨询'
      };
      return map[type] || '未知类型';
    },
    nextStep() {
      if (this.currentStep === 1) {
        this.$refs.consultForm.validate(valid => {
          if (valid) {
            this.currentStep++;
          }
        });
      } else {
        this.currentStep++;
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
      }
    },
    handleUploadSuccess(response, file) {
      this.fileList.push({
        name: file.name,
        url: response.url
      });
    },
    submitConsult() {
      this.successDialogVisible = true;
      // 这里可以添加实际提交到后端的逻辑
      console.log('提交数据:', {
        ...this.formData,
        attachments: this.fileList
      });
    }
  }
}
</script>

<style scoped>
.consult-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.consult-header {
  background: #545c64;
  display: flex;
  align-items: center;
  padding: 0 50px;
}

.logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.consult-main {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
}

.consult-form {
  margin-top: 30px;
  padding: 30px;
}

.el-steps {
  margin-bottom: 30px;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
}

.success-message {
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 60px;
  color: #67C23A;
  margin-bottom: 15px;
}

.file-item {
  display: block;
  margin: 5px 0;
  color: #409EFF;
}

@media (max-width: 768px) {
  .consult-header {
    padding: 0 20px;
  }

  .consult-main {
    padding: 0 10px;
  }

  .el-radio-group {
    display: flex;
    flex-direction: column;
  }

  .el-radio {
    margin: 5px 0;
  }
}
</style>